const path = require('path')
// 引入 css 提取插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

const HtmlWebpackPlugin = require('html-webpack-plugin')

// 处理 vue 文件第二步, 引入插件并注册
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  // 入口
  entry: './src/main.js',
  // 出口
  output: {
    filename: 'main.js',
    // 这里修改输出地址的话, 需要用绝对路径
    path: path.resolve(__dirname, '../dist')
  },

  // 模块加载器配置
  module: {
    rules: [
      // 规则数组中的每一个元素都是一种加载规则对象
      // 处理 vue 文件第一步
      {
        test: /\.vue$/,
        use: [
          'vue-loader'
        ]
      },
      {
        // 匹配文件类型
        test: /\.css$/,
        // 指定加载器
        // 附加: 这里的loader如果是多个并列
        // 内部的使用顺序其实是反着来的
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: './'
            }
          },
          'css-loader'
        ]
      },
      {
        test: /\.less$/,
        use:[
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: './'
            }
          },
          'css-loader',
          'less-loader'
        ]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: 'images'
            }
          }
        ]
      },
      {
        test: /\.ttf$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: 'assets'
            }
          }
        ]
      }
    ]
  },
  plugins: [
    // 这里每一个都是一个插件, 
    new MiniCssExtractPlugin(),
    new HtmlWebpackPlugin({
      template: 'public/index.html'
    }),
    new VueLoaderPlugin()
  ]
}